const allbox = document.getElementsByClassName("smallbox");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
var myInter;

/* function rand1() {
    let arr = [];
    for (let i = arr.length; i < 3; i++) {
        let rand = parseInt(Math.random() * 9) + 1;
        let result = arr.indexOf(rand);
        if (result === -1) { arr.push(rand) };
    }
    return arr;
} */
// 上面是原来写的 rand()，经试验，有时候只能生成两个数，所以我猜测 for循环里的 let i =   这个参数，只是第一次执行。

/* function rand2() {
    let arr = [];
    for (let i = arr.length; i < 6; i++) {
        let rand = parseInt(Math.random() * 9) + 1;
        let result = arr.indexOf(rand);
        if (result === -1) { arr.push(rand) };
        if (arr.length===3){break};
    }
    return arr;
}
 */
// 上面是简单改正后的第二版，基本上正常了，但是没有从根本上解决问题。而且有些编程语言不让用break，这怎么办呢，于是，继续优化为下一版本。

/* function rand3() {
    let arr = [];
    let i = 1;
    while(i < 3) {
        let rand = parseInt(Math.random() * 9) + 1; 
        let result = arr.indexOf(rand);
        if (result === -1) { arr.push(rand) };
        i = arr.length;
    }
    return arr;
}  */
// 第三版生成三个数是没错了，但是下面change()函数调用的时候老出错，TypeError。琢磨半天才想明白，不能生成1-9的数，但生成0-8。allbox不是1-9，它是数组是0开始的。

function rand() {
    let arr = [];
    let i = 1;
    while (i < 3) {
        let rand = parseInt(Math.random() * 9);
        let result = arr.indexOf(rand);
        if (result === -1) { arr.push(rand) };
        i = arr.length;
    }
    return arr;
}

function change() {
    reset();
    let arr = rand();
    let i = 0;
    while (i < 3) {
        allbox[arr[i]].style.background = color();
        i++;
    }
}

function color() {
    var r, g, b;
    r = Math.floor(Math.random() * 256);
    g = Math.floor(Math.random() * 256);
    b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

function reset() {
    for (let i = 0; i < allbox.length; i++) {
        allbox[i].style.backgroundColor = 'orange';
    }
}
// 在上面错了，这么多之后，我仔细看这个函数，我觉得它可能会错，谁知道，认真测试后，没错误。
//我觉得会错，是看到 for 后小括号 里 i++ ，它先加了一次了，下面allbox[i]可能会是 allbox[1]，实现是还是allbox[0]
// 所以今天学到最重要的一个知识，在书也上没看到过的。
// for 循环， 第一个参数只执行一次，第三个参数循环完才执行。

btn1.onclick = function () {
    clearInterval(myInter); //不加这个，多点几下，的确会越闪越快。
    myInter = setInterval("change()", 2000);
}

/* 
btn2.onclick = function () {
    clearInterval("change()", 2000);
    reset();
} */
//最开始的写法，关键是，停止不了。

btn2.onclick = function() {
    clearInterval(myInter);
    reset();
}  